<template>
  <view class="containerTabList">
    <!-- 按钮组 -->
    <view style="margin-bottom: 8px; display: flex;">
    </view>
    <!-- 动态生成原生表格 -->
    <scroll-view :refresher-background="'transparent'" style="display: flex; width: 95vw;background: transparent;"
      scroll-x="true">
      <view class="table-container">
        <table>
          <thead>
            <tr>
              <th style="position: sticky;left: 0;width: 2%;z-index: 2;"></th>
              <!-- <th>序号</th> -->
              <th v-for="(item, index) in columns" :key="index">{{ item.title }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, rowIndex) in tableData" :key="rowIndex" @click="clickRow(row, rowIndex)">
              <td style="text-align: center;background-color: #f1f2f4;width: 30rpx;" class="sticky-col">
                {{ rowIndex + 1 }}
              </td>

              <td v-for="(header, colIndex) in columns" :key="colIndex">
                <!-- 如果是数组 -->
                <span v-if="Array.isArray(row[header.id]) && row[header.id].length > 0">
                  <!-- 处理地址对象数组 -->
                  <span v-if="row[header.id][0].addr">
                    {{ row[header.id][0].addr }}
                  </span>
                  <!-- 处理普通值数组（2个元素的情况） -->
                  <span v-else-if="row[header.id].length === 2">
                    {{ row[header.id][0] }} 至 {{ row[header.id][1] }}
                  </span>
                  <!-- 其他数组 -->
                  <span v-else>
                    {{ row[header.id].join(', ') }}
                  </span>
                </span>

                <!-- 如果是对象 -->
                <span v-else-if="row[header.id] && typeof row[header.id] === 'object'">
                  {{ row[header.id].addr || '-' }}
                </span>

                <!-- 普通值 -->
                <span v-else>
                  {{ row[header.id] || '-' }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </view>
    </scroll-view>

    <view class="table-add" @click="openForm"><text style="font-size: 50rpx;margin-right: 10rpx;">+</text> 添加数据</view>

    <up-popup :show="show" mode="bottom" @close="close" :closeOnClickOverlay="true" :safeAreaInsetBottom="true">
      <view class="popup-container" :style="popupStyle">
        <up-navbar :placeholder="false" :title="'第' + (publicIndex + 1) + '行数据'" @leftClick="leftClick"
          :safeAreaInsetTop="true"></up-navbar>
        <scroll-view scroll-y :style="scrollStyle" :enhanced="true" :show-scrollbar="false">
          <up-form labelPosition="top" class="dynamic-form">
            <up-form-item v-for="(formItem, formIndex) in columns" :key="formIndex" :label="formItem.title"
              :borderBottom="true" :required="formItem.props.required">
              <template #label>
                <span style="margin-bottom: 6rpx;">
                  <span v-if="formItem.props.required" style="color: red;">*</span>
                  <span v-else>&nbsp;</span>
                  {{ formItem.title }}
                </span>
              </template>
              <view>
                <!-- {{ formItem.name }} -->
                <!-- {{formItem.props.required}} -->
                <up-input v-if="formItem.name == 'TextInput'" :placeholder="formItem?.props.placeholder"
                  border="surround" :disabled="!formItem.props.disabled" v-model="formDataTemp[formItem.id]"
                  :customStyle="{ width: '83vw', marginLeft: '10rpx' }">
                </up-input>

                <up-input v-if="formItem.name == 'TextareaInput'" :placeholder="formItem?.props.placeholder"
                  border="surround" :disabled="!formItem.props.disabled" v-model="formDataTemp[formItem.id]"
                  :customStyle="{ width: '83vw', marginLeft: '10rpx' }">
                </up-input>

                <view v-if="formItem.name == 'SelectInput'" @click="openPopup([formItem?.props?.options], formItem)">
                  <view class="select-input" :style="{ width: '80vw', marginLeft: '10rpx' }">
                    {{ formDataTemp[formItem.id] || formItem?.props.placeholder }}
                  </view>
                </view>

                <view v-if="formItem.name == 'DateTime'" @click="DateTimeopen([formItem?.props?.options], formItem)">
                  <view class="select-input" :style="{ width: '80vw', marginLeft: '10rpx' }">
                    {{ formDataTemp[formItem.id] || formItem?.props.placeholder }}
                  </view>
                </view>

                <view v-if="formItem.name == 'MaterialPicker'">
                  <up-input :placeholder="formItem?.props.placeholder" border="surround"
                    v-model="formDataTemp[formItem.id]" :disabled="!formItem.props.disabled"
                    :customStyle="{ width: '83vw', marginLeft: '10rpx' }" @focus="Materialopen(formItem)"></up-input>
                </view>

                <view v-if="formItem.name == 'NumberInput'">
                  <up-input type="digit" :placeholder="formItem?.props.placeholder" border="surround"
                    v-model="formDataTemp[formItem.id]" :disabled="!formItem.props.disabled"
                    :customStyle="{ width: '83vw', marginLeft: '10rpx' }"></up-input>
                </view>

                <view v-if="formItem.name == 'CalculateInput'">
                  <up-input type="number" :placeholder="formItem?.props.placeholder" border="surround"
                    v-model="formDataTemp[formItem.id]" :disabled="!formItem.props.disabled"
                    :customStyle="{ width: '83vw', marginLeft: '10rpx' }"></up-input>
                </view>

                <view v-if="formItem.name == 'AmountInput'">
                  <up-input type="number" :placeholder="formItem?.props.placeholder" border="surround"
                    v-model="formDataTemp[formItem.id]" :disabled="!formItem.props.disabled"
                    :customStyle="{ width: '83vw', marginLeft: '10rpx' }"></up-input>
                </view>

                <view v-if="formItem.name == 'DeptPicker'" style="margin-left: 10rpx;">
                  <DeptPicker :TableListValue="tableData[publicIndex][formItem.id]"
                    @selectedTableList="handleDeptSelect([formItem?.props?.options], formItem)"
                    v-model="formDataTemp[formItem.id]" :titleItems="title" :label="formItem.title"
                    :placeholder="formItem?.props.placeholder" :itemId="formItem.id">
                  </DeptPicker>
                </view>

                <view v-if="formItem.name == 'UserPicker'" style="margin-left: 10rpx;">
                  <UserPicker :TableListValue="tableData[publicIndex][formItem.id]"
                    @selectedTableList="handleUserSelect([formItem?.props?.options], formItem)"
                    v-model="formDataTemp[formItem.id]" :titleItems="title" :label="formItem.title"
                    :placeholder="formItem?.props.placeholder" :itemId="formItem.id">
                  </UserPicker>
                </view>

                <view v-if="formItem.name == 'MapPicker'" style="margin-left: 10rpx;">
                  <MapPicker :TableListValue="tableData[publicIndex][formItem.id]"
                    @selectedTableList="handleUserSelect([formItem?.props?.options], formItem)"
                    v-model="formDataTemp[formItem.id]" :titleItems="title" :label="formItem.title"
                    :placeholder="formItem?.props.placeholder" :itemId="formItem.id">
                  </MapPicker>
                </view>

                <view v-if="formItem.name == 'DateTimeRange'" style="margin-left: 10rpx;">
                  <DateTimeRange :TableListValue="tableData[publicIndex][formItem.id]"
                    @selectedTableList="handleUserSelect([formItem?.props?.options], formItem)"
                    v-model="formDataTemp[formItem.id]" :titleItems="title" :label="formItem.title"
                    :placeholder="formItem?.props.placeholder" :itemId="formItem.id">
                  </DateTimeRange>
                </view>

              </view>
            </up-form-item>
          </up-form>

          <!-- #ifdef H5 -->
          <view style="height: 160rpx"></view>
          <!-- #endif -->

          <!-- #ifdef APP-PLUS -->
          <view style="height: 200rpx"></view>
          <!-- #endif -->
        </scroll-view>

        <!-- 底部操作按钮（固定定位） -->
        <view class="action-buttons">
          <up-button v-if="tableData.length > 1" class="action-btn reset-btn" text="删除" @click="cleanshow = true"
            plain />
          <up-button class="action-btn submit-btn" type="primary" text="确定" @click="sure()" />
        </view>
      </view>
    </up-popup>

    <!--  结算方式  -->
    <up-picker :show="pickerShow" :columns="pickerColumns" :closeOnClickOverlay="true" @confirm="confirm"
      @cancel="pickerShow = false"></up-picker>
    <!--  年月日  -->

    <up-datetime-picker v-if="Dateshow" @cancel="Dateshow = false" hasInput :show="Dateshow" v-model="Datevalue"
      @confirm="Dateconfirm" :closeOnClickOverlay="true" @close="DateclosePopup" mode="date"></up-datetime-picker>


    <up-modal :show="cleanshow" content='你确定要删除这一行吗' contentTextAlign="center" :showCancelButton="true"
      @cancel="cleanshow = false" confirmText="确定" @confirm="clean"></up-modal>
  </view>
</template>

<script>
import componentMinxins from '../ComponentMinxins';
import DeptPicker from "./DeptPicker.vue";
import FormItemRender from "./FormItemRender.vue";
import UserPicker from "./UserPicker.vue";
import DateTimeRange from './DateTimeRange.vue';
import MapPicker from './MapPicker.vue'
export default {
  mixins: [componentMinxins],
  components: {
    FormItemRender,
    DeptPicker,
    UserPicker,
    DateTimeRange,
    MapPicker
  },
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    },
    placeholder: {
      type: String,
      default: '添加数据'
    },
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    showBorder: {
      type: Boolean,
      default: true
    },
    maxSize: {
      type: Number,
      default: 0
    },
    rowLayout: {
      type: Boolean,
      default: true
    },
    showSummary: {
      type: Boolean,
      default: false,
    },
    summaryColumns: {
      type: Array,
      default: () => {
        return []
      }
    },
    otherBtn: {
      type: Array,
      default: () => {
        return []
      }
    },
    itemIndex: {
      type: Number,
      default: 0
    },
    options: {
      type: Array,
      default: () => {
        return []
      }
    },
    source: {
      type: Number,
      default: 1
    },
    sourceType: {
      type: Number,
      default: 1
    },
    format: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    ApplyDetailList: {
      type: Array,
      default: () => {
        return []
      }
    },
    itemId: {
      type: String,
      required: true
    },
  },
  data () {
    return {
      cleanshow: false,
      tableData: [],
      titleArrays: [],
      show: false,
      form: {},
      publicIndex: null,
      popupStyle: {
        height: '70vh', // 默认高度
        maxHeight: '80vh', // 最大高度
        display: 'flex',
        flexDirection: 'column'
      },
      // 滚动区域样式
      scrollStyle: {
        flex: 1,
        padding: '0 20rpx'
      },
      pickerShow: false,      // 控制 Picker 显示
      pickerColumns: [],      // Picker 数据源
      currentPickerColumn: null, // 当前操作的列
      Dateshow: false,
      Datevalue: Number(new Date()),
      dateMode: '',
      format: '',
      wlshow: false,
      pageNo: 1,
      pageSize: 15,
      total: 0,
      keywords: '',
      loading: false,
      Materialdata: [],
      productName: '',
      current: null,
      Materialcolumn: [],
      materialFieldMapping: {
        // 物料基础信息
        'product_name': 121,   // 物料选择
        'rule_no': 559,       // 物料编码
        'rule_name': 123,     // 物料规格
        'product_danwei': 126,// 单位
        'rule_price': 124,    // 单价
        'material_num': 122,  // 预计数量
        // 金额会自动计算不需要映射
      },
      formDataTemp: {}, // 新增：临时表单对象
      isNewUnSavedRow: false, // 标记是否是新增未保存的行
    }
  },
  created () {
    console.log('this.columns', this.columns);

    uni.$on('materialselection', (data) => {
      this.goJumpTo(data)
    })

  },
  mounted () {
    this.columns.forEach(item => {
      var data = {
        label: item.id
      }
      this.titleArrays.push(data);
    })

    this.updatePopupHeight()
    // 监听屏幕旋转
    uni.onWindowResize(() => this.updatePopupHeight())

    let value = uni.getStorageSync('formData');
    let formItems = JSON.parse(value.formItems);
    formItems.forEach(item => {
      if (item.title == this.title) {
        uni.removeStorageSync(`${item.id}`);
      }
    })

    this.handleDataEcho();
  },
  watch: {
    tableData: {
      handler (newValue) {
        let value = uni.getStorageSync('formData');
        let formItems = JSON.parse(value.formItems);
        formItems.forEach(item => {
          if (item.title == this.title) {
            item.value = newValue;
            uni.setStorageSync(item.id, newValue);
          }
        })
      },
      deep: true
    },
    formDataTemp: {
      deep: true,
      handler (newVal) {
        this.autoCalculateTotal(newVal);
      }
    }
  },
  methods: {

    handleDataEcho () {
      if (!this.ApplyDetailList.formData || !this.itemId) return;
      const fieldValue = this.ApplyDetailList.formData[this.itemId];
      if (Array.isArray(fieldValue)) {
        fieldValue.forEach(item => {
          if (item && typeof item === 'object') {
            const newRow = {};
            this.columns.forEach(column => {
              newRow[column.id] = '';
              if (column.name === 'CalculateInput') {
                newRow[column.id] = '0.00';
              }
            });
            Object.keys(item).forEach(key => {
              const matchedColumn = this.columns.find(col =>
                col.id === key || col.props?.field === key
              );
              if (matchedColumn) {
                newRow[matchedColumn.id] = item[key];
              }
            });
            // 添加到表格数据 
            this.tableData.push(newRow);
          }
        });
      }
      else if (fieldValue !== undefined && fieldValue !== null && fieldValue !== '') {
        const newRow = {};
        this.columns.forEach(column => {
          newRow[column.id] = '';
          if (column.name === 'CalculateInput') {
            newRow[column.id] = '0.00';
          }
        });
        newRow[this.itemId] = fieldValue;
        this.tableData.push(newRow);
      }
      if (this.tableData.length > 0) {
        this.publicIndex = 0;
        this.formDataTemp = JSON.parse(JSON.stringify(this.tableData[0]));
        this.$emit('height-change', 0);
      }
    },

    autoCalculateTotal (row) {
      this.columns.forEach(column => {
        if (column.name === 'CalculateInput') {
          const formula = column.props?.formula || '';
          const sourceFields = column.props?.sourceFields || [];
          const precision = column.props?.precision || 2;

          // 如果源字段和公式都有效
          if (sourceFields.length > 0 && formula) {
            try {
              // 获取源字段的值
              const values = sourceFields.map(field => {
                // 找到对应的列ID
                const sourceColumn = this.columns.find(col => col.title === field);
                if (sourceColumn) {
                  return parseFloat(row[sourceColumn.id]) || 0;
                }
                return 0;
              });

              let result = 0;
              if (formula.includes('*')) {
                result = values.reduce((a, b) => a * b, 1);
              } else if (formula.includes('+')) {
                result = values.reduce((a, b) => a + b, 0);
              } else if (formula.includes('-')) {
                result = values.reduce((a, b) => a - b);
              } else if (formula.includes('/')) {
                result = values.reduce((a, b) => a / b);
              }

              // 设置精度并更新行数据
              row[column.id] = result.toFixed(precision);
            } catch (e) {
              console.error('计算错误:', e);
              row[column.id] = '0.00';
            }
          }
        }
      });
    },
    handleDeptSelect (options, formItem) {
      this.format = options.format
      this.currentPickerColumn = formItem // 保存当前操作的表单项
      setTimeout(() => {
        if (this.currentPickerColumn && this.publicIndex !== null) {
          const columnId = this.currentPickerColumn.id
          const storedValue = uni.getStorageSync(columnId);
          this.formDataTemp[columnId] = storedValue;
        }
      }, 500); // 延迟 0.5 秒（500 毫秒）
    },

    handleUserSelect (options, formItem) {
      this.format = options.format
      this.currentPickerColumn = formItem
      setTimeout(() => {
        if (this.currentPickerColumn && this.publicIndex !== null) {
          const columnId = this.currentPickerColumn.id
          const storedValue = uni.getStorageSync(columnId);
          this.formDataTemp[columnId] = storedValue;
        }
      }, 500);
    },
    goJumpTo (material) {
      if (this.publicIndex === null || !material || material.length === 0) return;

      const item = material[0];
      const currentRow = this.tableData[this.publicIndex];

      const fieldMappings = {
        'm_name': 121,
        'm_no': 559,
        'm_desc': 123,
        'unit': 126,
        'price': 124,
        'num': 122
      };

      Object.entries(fieldMappings).forEach(([materialField, formField]) => {
        const targetColumn = this.columns.find(col => col.props?.field === formField);
        if (targetColumn && item[materialField] !== undefined) {
          currentRow[targetColumn.id] = this.formatValue(item[materialField], targetColumn);
        }
      });

      console.log('currentRow', currentRow)

      this.formDataTemp = JSON.parse(JSON.stringify(currentRow));
    },
    // 根据字段类型格式化值
    formatValue (value, column) {
      if (value === null || value === undefined) return '';

      // 处理数字类型
      if (['NumberInput', 'AmountInput'].includes(column.name)) {
        const num = parseFloat(value);
        return isNaN(num) ? '' : num;
      }

      // 其他类型转为字符串
      return String(value);
    },

    Materialopen (formItem) {
      this.currentPickerColumn = formItem
      uni.navigateTo({
        url: `/pages/apply/form/components/materialselection`
      });
    },
    DateclosePopup (e) {
      this.Dateshow = false;
    },
    Dateconfirm (e) {
      if (this.currentPickerColumn && this.publicIndex !== null) {
        const columnId = this.currentPickerColumn.id;
        const formattedDate = this.formatDate(e.value);
        this.formDataTemp[columnId] = formattedDate;
      }
      this.Dateshow = false;
    },
    formatDate (timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份补零
      const day = String(date.getDate()).padStart(2, '0'); // 日期补零
      return `${year}-${month}-${day}`;
    },
    formatter (type, value) { //选择器格式处理
      if (this.format == 'yyyy-MM-dd') {
        this.dateMode = "date";
      } else if (this.format == 'yyyy-MM-dd HH:mm') {
        this.dateMode = "datetime";
      } else if (this.format == 'yyyy-MM') {
        this.dateMode = "year-month";
      }
      return value;
    },
    DateTimeopen (props, formItem) {
      this.format = props.format
      this.currentPickerColumn = formItem // 保存当前操作的表单项
      this.Dateshow = true
    },
    openPopup (options, formItem) {
      this.pickerColumns = options
      this.currentPickerColumn = formItem // 保存当前操作的表单项
      this.pickerShow = true
    },
    confirm (val) {
      if (this.currentPickerColumn && this.publicIndex !== null) {
        this.formDataTemp[this.currentPickerColumn.id] = val.value[0]
      }
      this.pickerShow = false
    },
    updatePopupHeight () {
      const systemInfo = uni.getSystemInfoSync()
      const windowHeight = systemInfo.windowHeight
      const isMobile = systemInfo.platform === 'android' || systemInfo.platform === 'ios'

      this.popupStyle.height = isMobile ? '70vh' : 'auto'
      this.popupStyle.maxHeight = `${windowHeight * 0.8}px`

      const navbarHeight = 44
      this.scrollStyle.maxHeight = `${windowHeight - navbarHeight - 100}px`
    },
    leftClick () {
      this.show = false
      this.$emit('height-change', 1);
    },
    clear () {
      this.tableData = [];
      this.publicIndex = null;
      this.show = false;
      this.$emit('height-change', 1);
      uni.$u.toast('列表已清空');
    },
    insertAbove () {
      if (this.publicIndex === null) {
        uni.$u.toast('请先选择一行');
        return;
      }

      const newRow = {};
      this.columns.forEach(column => {
        newRow[column.id] = '';
      });

      this.tableData.splice(this.publicIndex, 0, newRow);
      uni.$u.toast('已在上方插入新行');
    },
    insertBelow () {
      if (this.publicIndex === null) {
        uni.$u.toast('请先选择一行');
        return;
      }
      const newRow = {};
      this.columns.forEach(column => {
        newRow[column.title] = '';
      });

      this.tableData.splice(this.publicIndex + 1, 0, newRow);
      uni.$u.toast('已在下方插入新行');
    },
    openForm () {
      const newRow = {};
      this.columns.forEach(column => {
        newRow[column.id] = '';
        if (column.name === 'CalculateInput') {
          newRow[column.id] = '0.00';
        }
      });
      this.tableData.push(newRow);
      this.publicIndex = this.tableData.length - 1;
      this.formDataTemp = JSON.parse(JSON.stringify(newRow)); // 深拷贝
      this.isNewUnSavedRow = true;   // 标记这行是新增未保存的状态
      this.show = true;
      this.$emit('height-change', 0);
    },
    clickRow (row, rowIndex) {
      this.formDataTemp = JSON.parse(JSON.stringify(this.tableData[rowIndex])); // 深拷贝
      this.publicIndex = rowIndex;
      this.show = true;
      this.$emit('height-change', 0);
    },
    close () {
      // 如果是新增未保存的行，关闭时移除
      if (this.isNewUnSavedRow && this.publicIndex !== null) {
        this.tableData.splice(this.publicIndex, 1);
        this.isNewUnSavedRow = false;

        // 重置选中行索引
        if (this.publicIndex >= this.tableData.length) {
          this.publicIndex = this.tableData.length - 1;
        }
      }

      this.show = false;
      this.$emit('height-change', 1);
    },
    clean () {
      if (this.publicIndex !== null) {
        this.tableData.splice(this.publicIndex, 1);
        if (this.publicIndex >= this.tableData.length) {
          this.publicIndex = this.tableData.length - 1;
        }
        this.show = false;
        this.$emit('height-change', 1);
        this.cleanshow = false
        uni.$u.toast('已删除当前行数据');
      } else {
        uni.$u.toast('请先选择一行');
      }
    },
    sure () {
      if (this.publicIndex === null || !this.formDataTemp) {
        uni.$u.toast('请选择一行数据');
        return;
      }

      const currentRow = this.formDataTemp;
      let hasError = false;

      this.columns.forEach(item => {
        if (item.props.required) {
          const fieldValue = currentRow[item.id];
          const isEmpty = Array.isArray(fieldValue)
            ? fieldValue.length === 0
            : fieldValue === '' || fieldValue === null || fieldValue === undefined;
          if (isEmpty) {
            hasError = true;
            uni.$u.toast(`请填写${item.title}`);
            return;
          }
        }
      });

      if (!hasError) {
        this.$set(this.tableData, this.publicIndex, JSON.parse(JSON.stringify(this.formDataTemp)));
        // 数据保存后，重置新增未保存标记
        this.isNewUnSavedRow = false;
        this.show = false;
        this.$emit('height-change', 1);
        uni.$u.toast('数据已保存');
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.containerTabList {
  background-color: #ffffff !important;
}

::v-deep uni-button {
  margin-left: 0 !important;
  margin-right: 10rpx !important;
  border: none !important;
}

.popup-containerd {
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dynamic-form {
  padding-bottom: 120rpx;
  /* 给底部按钮留空间 */
}

.form-item {
  margin-bottom: 24rpx;
}


.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
  z-index: 10;
}


.action-btn {
  flex: 1;
  margin: 0 10rpx;
  height: 80rpx;
}

.reset-btn {
  background-color: #f8f8f8;
  color: #333;
}

.submit-btn {
  background-color: #2979ff;
}

/* 适配H5端 */
/* #ifdef H5 */
.popup-container {
  max-width: 500px;
  /* H5端限制最大宽度 */
  margin: 0 auto;
  /* 居中显示 */
}

/* #endif */

.custom-btn {
  width: 320rpx;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  padding: 10px 20px;
  /* 调整内边距 */
  height: 80rpx;
  /* 固定高度 */
  line-height: normal;
  /* 避免文字偏移 */

  &.primary-btn {
    background-color: #007aff;
    /* 自定义主色调 */
    color: white;
    /* 文字颜色 */
  }
}

.table-container {
  width: 100%;
  // overflow-x: auto;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: auto;
  z-index: 1;
  position: relative;
}

td,
th {
  text-align: center;
  padding: 8px;
  border: 1px solid #ccc;
  white-space: nowrap;
}

td {
  width: 150rpx;
  text-align: center;
  padding: 8px;
  height: 0.6rem;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  color: black;
  font-size: 28rpx;
}

th {
  width: 150rpx;
  text-align: center;
  background-color: #e3e4e6;
  padding: 8px;
  /* font-weight: 100; */
  color: black;
  font-size: 24rpx;
  /* border-right: 1px solid #ccc;
	  border-bottom: 1px solid #ccc; */
}

.submit {
  position: fixed;
  /* 固定定位 */
  bottom: 0;
  /* 固定在底部 */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  /* 水平居中 */
  gap: 10px;
  /* 按钮之间的间距 */
  padding: 10px;
  /* 内边距 */
  background-color: #fff;
  /* 背景色 */
  border-top: 1px solid #eee;
  /* 顶部边框 */
  z-index: 1000;
  /* 确保按钮在最上层 */
}

.select-input {
  padding: 10px 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  min-height: 32rpx;
  line-height: 32rpx;
  color: #606266;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
}

.table-add {
  text-align: center;
  color: #409eff;
  font-size: 30rpx;
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
